<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '特色民宿',
  },
}
</route>
<template>
  <view class="w-screen overflow-hidden bg-#f6f6f6 min-h-100vh box-border p-20rpx">
    <view class="tab_cont" @click="handleClickLeft">
      <wd-icon name="thin-arrow-left" size="18" color="#6B6B6B" />
    </view>
    <view class="bg-#fff p-20rpx w-100% box-border mb-20rpx" v-for="item in list" :key="item">
      <wd-row :gutter="10" @click="handleDetail(item.id)">
        <wd-col :span="10">
          <view class="w-250rpx h-250rpx" @click="handleDetail(item.id)">
            <image
              v-if="item && item.fileDOList && item.fileDOList.length != 0"
              class="w-100% h-100% border-rd-12rpx"
              :src="item.fileDOList[0].url"
            ></image>
            <view
              v-else
              class="border-rd-12rpx"
              style="
                font-size: 28rpx;
                line-height: 250rpx;
                color: #333333;
                text-align: center;
                background-color: rgb(247 247 247);
                box-shadow: 0 0 0 2rpx #ccc !important;
              "
            >
              暂无图片
            </view>
          </view>
        </wd-col>
        <wd-col :span="14">
          <view
            @click="handleDetail(item.id)"
            class="flex"
            style="flex-wrap: wrap; align-items: center; height: 250rpx"
          >
            <view class="ellipsis title" style="width: 100%">
              {{ item.homestayName }}
            </view>
            <view class="flex" style="flex-wrap: wrap; width: 100%">
              <view class="mr-10rpx mt-10rpx" v-for="item in item.homestayLabel" :key="item">
                <wd-tag
                  style="width: 100rpx; font-size: 24rpx; text-align: center"
                  color="#AD0E0E"
                  bg-color="#AD0E0E"
                  plain
                >
                  {{ item }}
                </wd-tag>
              </view>
            </view>
            <view class="mt-6rpx" style="width: 100%">
              <span class="per-capita mr-4rpx">¥</span>
              <span class="per-money mr-4rpx">{{ item.consumption }}</span>
              <span class="per-capita">元</span>
            </view>
          </view>
        </wd-col>
      </wd-row>
    </view>
    <wd-loadmore v-if="list.length > 0" :state="state" @reload="loadmore" />
  </view>
</template>

<script lang="ts" setup>
import * as getApi from '../../../service/TouristCenter/index'

const handleDetail = (id) => {
  uni.navigateTo({
    url: '/pages/TouristCenter/Homestay/homestayDetails?id=' + id,
  })
}
function handleClickLeft() {
  uni.navigateBack()
}
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const state = ref<string>('loading')
const max = ref<number>(60)
// 获得特色民宿分页
const list = ref([])
const homestay = reactive({
  pageNo: 1,
  pageSize: 10,
  name: '',
  status: 2,
  origin: 'h5',
})
async function getHomestay() {
  const data: any = await getApi.getHomestayPage({ ...homestay })
  list.value.push(...data.data.list)
  max.value = data.data.total
  data.data.list.forEach((item) => {
    item.homestayLabel = item.homestayLabel.split(',')
    item.fileDOList = item.fileDOList.reverse().map((item) => {
      item.url = `${baseurl.value}${item.url}`
      return item
    })
  })
  list.value.length === max.value ? (state.value = 'finished') : (state.value = 'loading')
}

onLoad(() => {
  getHomestay()
  uni.$on('refreshPage', refreshPage)
})
onUnload(() => {
  uni.$off('refreshPage', refreshPage)
})
function refreshPage() {
  list.value = []
  getHomestay()
}
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getHomestay()
  }, 1000)
}
onReachBottom(() => {
  if (list.value.length === max.value) {
    state.value = 'finished'
  } else if (list.value.length < max.value) {
    homestay.pageNo += 1
    loadmore()
  }
})
</script>
<style scoped>
.title {
  font-size: 36rpx;
  font-weight: 500;
  color: rgb(16, 16, 16);
  text-align: justify;
}
.per-money {
  font-size: 36rpx;
  font-weight: 500;
  color: #cf3939;
  text-align: left;
}
.per-capita {
  font-size: 36rpx;
  font-weight: 500;
  color: #101010;
  text-align: left;
}
.tab_cont {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  z-index: 999;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.57);
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 50px;
}
::v-deep .wd-tag__text {
  display: block !important;
  height: 19px;
  overflow: hidden;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep .wd-tag {
  display: block !important;
}
</style>
